<template>
  <div class="serviceCompanyDetail">
    <div class="block w100 boxSizing pd30">
      <el-steps :active="detailStep" class="mg30 ml80 mr80" align-center finish-status="success">
        <el-step title="服务商申请"></el-step>
        <el-step title="等待审核"></el-step>
        <el-step title="申请成功"></el-step>
      </el-steps>
      <div class="tips-content">
            <p class="fwbold">申请服务券签约服务商应具备以下条件:</p>
            (一)在平台注册并通过初审，能为用券主体提供优质服务，无不良信用记录，愿意接受自治区工业和信息化厅、促进中心、监督单位组织的服务抽查监督、绩效评估，同意企业支付服务券产品费用时使用配额抵扣等额服务合同款。<br>
            (二)具备独立法人资格，规范经营，依法纳税。<br>
            (三)依法经营三年以上，具备较强的专业能力及服务能力，具有提供优质服务的经验和相应的财务能力，在广西拥有保障服务质量的核心业务专职团队。对新注册设立的独立法人主体，其母公司的相关业绩和能力可作为认定依据。<br>
            (四)经营和信用状况良好，无严重失信行为记录，未列入严重失信主体名单。<br>
      </div>
      <div class="tc fs16 fwbold mt20">
           2025年服务券签约机构申报表单
      </div>
      <div class="w100 fs-sm tr color-grey">扩展名:仅支持pdf。</div>
      <el-table :data="tableList" border stripe style="margin-top: 10px; max-height: calc(100vh - 550px); overflow: auto;">
        <el-table-column label="序号" type="index" width="100" align="center"></el-table-column>
        <el-table-column label="所需材料" prop="fileTypeName" align="center">
            <template slot-scope="{ row }">
              <div style="text-align:left;margin-left:30px">
                  <span class="color-red" v-if="row.isNotnull">*</span><span class="color-text">{{ row.fileTypeName }}</span>
                  <a v-if="row.fileTypeName?.indexOf('申请表') !== -1" :href="`${publicFileUrl}/签约机构申请表.xls`" target="_blank">
                  【<i class="el-icon-download"/>模板】</a>
              </div>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="400">
          <template slot-scope="scope">
            <div v-if="scope.row.isUpload == 0">
              <upload-file 
                v-if="detailStep === 0" 
                :disabled="detailStep !== 0" 
                :supportType="['pdf']" 
                @setFileUrl="uploadRespond($event, scope.row)">
                点击上传
              </upload-file>
            </div>
            <div v-else class="row-start">
              <div v-if="detailStep === 0 && scope.row.fileName" class="mr10">{{scope.row.fileName}}</div>
              <el-button v-else type="text" @click="openFile(scope.row)">点击查看</el-button>
              <el-button v-if="detailStep === 0" circle size="mini" style="height:28px" icon="el-icon-delete" type="danger" @click="removeFile(scope.row)"></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt10 checkboxText">
          <div class="mb10">
            <span><span class="color-red">*</span>是否可提供人工智能/AI相关服务：</span>
            <el-radio-group v-model="isAiService">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
          <el-checkbox v-if="detailStep === 0" v-model="checked"><i class="el-icon-warning"></i> 
                <span class="color-grey">提交申请前，请先阅读并同意</span>
                <a :href="`${publicFileUrl}/real.html`" target="_blank">《真实性承诺》</a>
          </el-checkbox>      
      </div>
      <div class="row-center mt40">
        <el-button @click="goBack" type="info" size="medium" plain>返回</el-button>
        <el-button :disabled="!checked" v-if="detailStep === 0" style="margin-left: 40px;" type="primary" size="medium" @click="submitApply">提交申请</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import uploadFile from "@/components/upload/uploadFile";
import { serviceApplyFileList,serviceApplyDetail,serviceApply,serviceApplyFileDownload } from '@/api/homeApi'

export default {
  props: {
    serviceApplyId: {
      type: Number,
      default: 0
    },
    applyTypeId: {
      type: Number,
      default: 0
    }
  },
  components: {
    uploadFile
  },
  data() {
    return {
      // 0-服务商申请 1-等待审核 2-申请成功
      detailStep: 0,
      tableList: [
        { name: '广西优质企业服务资源池签约服务商申请表', sort: 1 },
        { name: '机构登记、注册证照复印件', sort: 2 },
        { name: '曾经服务过的客户证明材料', sort: 3 },
        { name: '机构管理制度', sort: 4 },
        { name: '具备国家、自治区有关部门和行业组织授予荣誉称号的证明文件或证书复印件', sort: 5 },
        { name: '其他能证明本机构服务能力和实力的材料', sort: 6 },
      ],
      checked: false,
      status: 0,
      publicFileUrl:process.env.VUE_APP_PUBLIC_FILE_URL,
      isAiService: null
    }
  },
  mounted() {
    this.getserviceApplyFileList()
    this.getServiceApplyDetail()
  },
  watch: {
   // 对应的服务申请id变化时重新获取数据
    // serviceApplyId() {
    //   this.getserviceApplyFileList()
    //   this.getServiceApplyDetail()
    // },
    // applyTypeId() {
    //   this.getserviceApplyFileList()
    //   this.getServiceApplyDetail()
    // }
  },
  methods: {
    uploadRespond({fileId, fileName}, row) {
      this.$set(row, 'isUpload', 1)
      this.$set(row, 'fileId', fileId)
      this.$set(row, 'fileName', fileName)
    },
    removeFile(row) {
      this.$set(row, 'isUpload', 0)
      this.$set(row, 'fileId', '')
      this.$set(row, 'fileName', '')
    },
    openFile(row){
      serviceApplyFileDownload({applyTypeFileId:row.applyTypeFileId,baseFileName:row.fileTypeName,serviceApplyId:this.serviceApplyId}).then(res => {
        if (res.code === 200) {
           open(process.env.VUE_APP_BASE_API+`/public/file/v1/temp/get?token=${res.data.token}`)
        }
      })
    },
    goBack() {
      this.$emit('back')
    },
    getserviceApplyFileList() {
      serviceApplyFileList({serviceApplyId:this.serviceApplyId}).then(res => {
        this.tableList = res.data
      })
    },
    getServiceApplyDetail() {
      serviceApplyDetail({serviceApplyId:this.serviceApplyId}).then(res => {
        if (res.code === 200) {
            this.status = res.data.status
            // status:1/3-审核通过/不通过，0/5/6-待审核
          if(res.data.status === '1' || res.data.status === '3'){
            this.detailStep = 2
          } else if(res.data.status === '0' || res.data.status === '5' || res.data.status === '6'){
            this.detailStep = 1
          } else {
            this.detailStep = 0
         }
        }
      })
    },
    submitApply() {
      if (this.isAiService === null) {
        this.$message.error('请选择是否可提供人工智能/AI相关服务')
        return
      }
      serviceApply({
        applyFileReqList: this.tableList, 
        applyTypeId: this.applyTypeId, 
        id: this.serviceApplyId,
        isAiService: this.isAiService
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('提交成功')
          this.goBack()
          this.detailStep = 1
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables";
::v-deep.checkboxText .el-checkbox__label{
   color: $text-color-blue;
}
:deep(.el-step__title.is-success) {
  color: $text-color;
}

:deep(.el-step__head.is-success) {
  color: $text-color-blue;
  border-color: $text-color-blue;
}

:deep(.el-step__title.is-process) {
  color: $text-color-blue !important;
}

:deep(.el-step__head.is-success .el-step__line-inner) {
  // transition-delay: 0ms;
  border-width: 1px !important;
  width: 100% !important;
}

:deep(.el-step__head.is-process) {
  color: $text-color-blue;
  border-color: $text-color-blue;
}

:deep(.el-step__line-inner) {
  // border-style: dashed;
}

:deep(.el-step__title.is-process) {
  font-weight: 400;
  color: rgb(122, 121, 121);
}

:deep(.el-step__title.is-wait) {
  color: rgb(122, 121, 121);
}

.serviceCompanyDetail {
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
  height: 100%;
}
.boxSizing{
  box-sizing: border-box;
  height: 95%;
}
.tips-content {
  padding: 0px 20px;
  color: #333;
  font-size: 14px;
  line-height: 24px;
}
</style>
